<template>
  <div class="mainos">
    <div class="main_spac1 paddingBottom5">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>模板设置</span>
          </div>
          <div class="main_crumbs_rt box">
            <el-button @click="addNewTempalte">新增模板</el-button>
          </div>
        </div>
        <div v-loading="mainLoading">
          <div class="main_table" style="min-height: 550px">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="list"
              element-loading-text="加载中"
              fit
              highlight-current-row
              row-key="uid"
            >
              <el-table-column label="顶部标题" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  {{ scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column
                label="用户"
                prop="member_info.code"
                align="center"
                min-width="220"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row.default == 1">
                    <el-tag type="danger" size="mini">默认</el-tag>
                  </div>
                  <div v-else class="tag_box">
                    <el-tag
                      v-for="item in scope.row.new_member_ids"
                      :key="item"
                      type="success"
                      size="mini"
                      >{{ member[item].nickname }}</el-tag
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="创建时间"
                min-width="140"
                align="center"
                :show-overflow-tooltip="true"
                ><template slot-scope="scope">
                  {{ parseTime(scope.row.created_at) }}
                </template>
              </el-table-column>
              <el-table-column
                label="更新时间"
                min-width="140"
                align="center"
                :show-overflow-tooltip="true"
                ><template slot-scope="scope">
                  {{ parseTime(scope.row.updated_at) }}
                </template>
              </el-table-column>
              <el-table-column label="备注" :show-overflow-tooltip="true"
                ><template slot-scope="scope">
                  {{ scope.row.remark }}
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="240">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    v-repeatClick
                    @click="handleEdit(scope)"
                    >编辑</el-button
                  >
                  <el-button
                    type="info"
                    v-repeatClick
                    @click="handleReset(scope)"
                    >重置</el-button
                  >
                  <el-button
                    v-show="scope.row.default != 1"
                    type="danger"
                    v-repeatClick
                    @click="handleDelete(scope)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="main_page boxdq">
            <div></div>
            <!-- 分页 -->
            <div class="main_page_r">
              <el-pagination
                :current-page="current.page"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                @size-change="changeLimit"
                @current-change="changePage"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTemplateList,
  reset_template,
  delTemplate,
} from "@/api/global/globalPrint";

import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      parseTime,
      id: this.$route.params.id,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      listLoading: false,
      mainLoading: false,
      // 列表数据
      list: [],
      form: {
        tem_id: "",
      },
      member: {},
      // 弹窗
      lineVisible: false,
    };
  },
  methods: {
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.getTemplateList();
    },
    changePage(page) {
      this.current.page = page;
      this.getTemplateList();
    },
    getTemplateList() {
      this.mainLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.form,
        this.current
      );
      getTemplateList(data).then((res) => {
        this.mainLoading = false;
        if (res.errcode == 0) {
          res.list.map((e) => {
            e.name = "";
            e.new_member_ids = [];
            if (e.member_ids) {
              e.new_member_ids = e.member_ids.split(",");
            }
            try {
              let str = JSON.parse(e.print_settings);
              e.name = str.page.headerTitle;
            } catch (error) {
              console.log("错误", error);
            }
          });
          this.member = res.member;
          this.list = res.list;
          this.totalCount = res.count;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 编辑
    handleEdit(scope) {
      let row = scope.row;
      let id = row.id;
      let tem_id = row.tem_id;
      let default_tem = row.default;
      let query = {
        id: id,
        tem_id: tem_id,
      };
      if (!default_tem) {
        query.change_user = 1;
      }
      let routeData = this.$router.resolve({
        name: "orderprint",
        query: query,
      });
      window.open(routeData.href, "_blank");
    },
    // 重置
    handleReset(scope) {
      let row = scope.row;
      let id = row.id;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      reset_template(data).then((res) => {
        if (res.errcode == 0) {
          this.getTemplateList();
          this.$message.success("重置成功");
        } else {
          this.$message.error("操作失败");
        }
      });
    },
    // 删除
    handleDelete(scope) {
      let row = scope.row;
      let id = row.id;
      if (row.default == 1) {
        this.$message.error("默认模板不能删除!");
        return;
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      delTemplate(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("删除成功");
          this.getTemplateList();
        } else {
          this.$message.error("删除成功");
        }
      });
    },
    // 新增模板
    addNewTempalte() {
      let tem_id = this.form.tem_id;
      let routeData = this.$router.resolve({
        name: "addOrderPrint",
        query: {
          change_user: 1,
          tem_id: tem_id,
        },
      });
      window.open(routeData.href, "_blank");
    },
  },
  created() {
    if (this.$route.params.id) {
      this.form.tem_id = this.$route.params.id;
    }
    this.getTemplateList();
  },
};
</script>

<style lang="scss" scoped>
/deep/.main_table .el-table--small td .cell {
  height: auto;
  .tag_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    .el-tag {
      margin: 3px;
    }
  }
}
/deep/.el-button--danger:focus,
.el-button--danger:hover {
  background: #f78989;
  border-color: #f56c6c;
  color: #fff;
}
/deep/.el-button--primary:focus,
.el-button--primary:hover {
  background: #fff;
  border-color: #03a98e;
  color: #03a98e;
}
/deep/.el-button--info:focus,
.el-button--info:hover {
  background: #ffffff;
  border-color: #ebebeb;
  color: #333333;
}
</style>
